<template>
  <div class="flex h-full">
    <a-card class="pt-2 mr-2 min-w-fit h-full" size="small" :body-style="{ height: '100%', padding: '0 8px', display: 'flex', flexDirection: 'column' }">
      <a-tabs v-model:active-key="listType" class="mt-1" centered>
        <a-tab-pane :key="0" tab="科室" />
        <a-tab-pane :key="1" tab="个人" />
      </a-tabs>
      <a-input-search v-if="!listType" v-model:value="searchKey" placeholder="科室编号/科室名称/助记码" class="mt-3" @search="getEmpList" />
      <a-input-search v-else v-model:value="searchKey" placeholder="员工编号/员工姓名/助记码" class="mt-3" @search="getEmpList" />
      <div class="flex-1 overflow-auto">
        <BaseList :data-source="listData" :loading="loading">
          <template #renderItem="{ item }">
            <div class="py-2 px-3" :class="currentUser?.empId === item.empId ? 'active' : ''" @click="onSelectPatient(item)">
              <div class="flex justify-between">
                <div class="text-base font-bold text-primary truncate w-16" :title="item.empName">{{ item.empName }}</div>
                <div class="truncate" :title="item.ksmc">{{ item.ksmc }}</div>
              </div>
              <div class="flex justify-between pt-2">
                <div class="w-20 text-grey">{{ item.title || '-' }}</div>
              </div>
            </div>
          </template>
        </BaseList>
      </div>
    </a-card>
    <a-card>
      <a-spin :spinning="loadingCalender">
        <!-- <a-radio-group v-model:value="checkboxValue" class="absolute top-10" :options="options" /> -->
        <a-calendar v-model:value="value" @select="modifyTime">
          <template #dateCellRender="{ current }">
            <div v-for="(item, index) in getListData(current)" :key="index">
              <div v-if="item.schdName" class="flex items-center justify-between bg-red-200 py-1">
                <div class="flex-1 pl-3">{{ item.schdName || '' }}</div>
                <div class="flex-1 text-center">{{ item.roomName || '' }}</div>
              </div>
              <div class="pl-3 leading-6 mt-2">
                <div v-for="itemChild in item.outpSchedulingTimeList" :key="itemChild">
                  {{ itemChild.stTime }}-{{ itemChild.edTime }} <span class="ml-7">￥{{ itemChild.zfy }}</span>
                </div>
              </div>
            </div>
          </template>
        </a-calendar>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
// import { getSystemConfig } from '@/utils/systemConfig'

const loading = ref(false)
// const checkboxValue = ref('全部')
const listData = ref([])
const currentUser = ref({}) //选中的医生
const searchKey = ref('')
// const options = ref([
// { label: '全部', value: '全部' },
// { label: '上午', value: '上午' },
// { label: '下午', value: '下午' }
// { label: '夜晚', value: '夜晚', disabled: getSystemConfig('ENABLE_NIGHT_OUTPATIENT') !== '1' }
// ])
const listType = ref(0)
const loadingCalender = ref(false)
const timeListData = ref([])
const currentTime = ref(dayjs())
const getListData = (current) => {
  const dayTime = timeListData.value.filter((item) => {
    if (item.schdDate === dayjs(current).format('YYYY-MM-DD')) {
      return item
    }
  })
  return dayTime
}
const modifyTime = (rq) => {
  currentTime.value = rq
}
const getScheduling = async () => {
  loadingCalender.value = true
  const { code, data, msg } = await post('/operation/scheduling/getEmpSchedulingList', {
    empId: currentUser.value.empId,
    time: dayjs(currentTime.value).format('YYYY-MM-DD')
  })
  loadingCalender.value = false
  if (code !== 0) return message.error(msg)
  timeListData.value = data
}
const onSelectPatient = (record) => {
  currentUser.value = record
  getScheduling()
}
const getEmpList = async () => {
  loading.value = true
  const { code, data } = await post('/outp/mzdj/getDocterInfoList', {
    ksZjm: listType.value ? '' : searchKey.value,
    ksdm: '',
    emplb: '1',
    zjm: listType.value ? searchKey.value : ''
  })
  loading.value = false

  if (code !== 0) return
  listData.value = data
  currentUser.value = data[0]
  getScheduling()
}
watch(
  listType,
  () => {
    searchKey.value = ''
    listData.value = []
    getEmpList()
  },
  currentTime,
  () => {
    getScheduling()
  }
)
const value = ref()
onMounted(() => {
  getEmpList()
})
</script>
<style lang="less" scoped>
:deep(.ant-picker-calendar-header) {
  margin-bottom: 16px;
  .ant-radio-group {
    display: none;
  }
}
:deep(.ant-picker-content) {
  thead th {
    &::before {
      position: absolute;
      top: 0;
      right: 28px;
      content: '周';
    }
  }
}
:deep(.ant-picker-calendar-date-content) {
  height: 120px !important;
}
</style>
